@import 'vars.styl'
.calendar
  position: absolute
  z-index: z-index-calendar
  display: none
  background: #fff
  border: 1px solid modal-box-border-color
  propPrefix(box-shadow, 0 0 5px rgba(0, 0, 0, .1))
  .calendar-type
    position: relative
    padding: 10px
    overflow: hidden
    background: head-background-color
    border-bottom: 1px solid box-border-color
    > div
      float: left
      width: 50px
      height: 30px
      margin-left: -1px;
      border: 1px solid theme-color
      text-align: center
      line-height: 28px
      background: #fff
      color: btn-active-bg-color
      cursor: pointer
      &.active
        color: #fff
        background: theme-color
        cursor: default
    .calendar-close
      position: absolute
      right: 10px
      top: 0
      font-size: 24px
      color: theme-color
      cursor: pointer
      background: transparent
      font-family: serif
      &:hover
        color: red

  .calendar-body
    table
      width: 100%
      border-spacing: 0
      td
        padding: 0
        margin: 0
        text-align: center
      tbody
        td
          cursor: default
          border: 1px solid transparent
        .selected
          background: btn-empty-active-bg-color
          border: 1px solid theme-color
        .disabled
          background:#fff
          opacity:0.3
          cursor:not-allowed
    td.calendar-combox-wrap
      border: 0
    .calendar-D, .calendar-W
      tbody td
        width: 14.28%
        height: 36px
      .prev-month, .next-month
        color: #888
      .calendar-combox-year
        .calendar-combox-selected
          border-right: 1px solid box-border-color
        .calendar-combox-options
          border-left: 0
      .calendar-combox-month
        .calendar-combox-options
          box-sizing: content-box;
          margin-left: -1px
          border-right: 0
    .calendar-W
      tbody td
        width: 100%
      .week-day
        float: left;
        width: 14.28%
        height: 36px
        text-align: center
        line-height: @height

    .calendar-M
      tbody td
        width: 33.33%
        height: 54px
      .calendar-combox-options
        border-left: 0
        border-right: @border-left

    .calendar-Q
      .season-cell
        width: 50%
        height: 108px

    .calendar-year
      .year-cell
        width: 33.33%
        height: 54px

    .calendar-week-head
      td
        height: 36px
        color: #888

  .calendar-foot
    padding: 10px
    overflow: hidden
    background: #E7ECF1
    border-top: 1px solid box-border-color
    .calendar-range-symbol
      float: left
      height: 28px
      padding: 0 3px
      font-size: 12px
      line-height: @height
      color: #333
    input[type=text]
      float: left
      width: 80px
      height: 28px
      line-height: @height
      font-size: 13px
      text-align: center
      border: 1px solid box-border-color
      color: #333
      outline: none
    .calendar-btn-ok,
    .calendar-btn-cancel
      float: right
      width: 60px
      height: 28px
      margin-left: 2px
      outline: none
      border: 1px solid theme-color
      font-size: 13px
      cursor: pointer
    .calendar-btn-ok
      btn()
    .calendar-btn-cancel
      margin-left: 30px
      btn-empty()

.calendar-combox
  position: relative
  float: left
  &.calendar-combox-expanded
    .calendar-combox-options
      display: block
  .calendar-combox-selected
    position: relative
    width: 100%
    height: 36px
    line-height: 36px
    text-align: center
    color: #333
    border-bottom: 1px solid box-border-color
    cursor: pointer
    &:after
      display: inline-block
      width: 0
      height: 0
      margin-left: 8px;
      vertical-align: middle;
      border-top: 5px solid theme-color
      border-left: 5px solid transparent
      border-right: 5px solid transparent
      content: ''
  .calendar-combox-options
    position: absolute
    top: 35px
    left: 0
    display: none
    width: 100%
    max-height: 206px
    overflow: auto
    margin: 0
    padding: 0
    border: 1px solid box-border-color
    background: #fff
    z-index: 9
    propPrefix(box-shadow, 0 4px 4px rgba(0, 0, 0, .1))
    li
      float: left
      width: 50%
      height: 34px
      line-height: 34px
      color: #666
      font-size: 14px
      text-align: center
      list-style: none
      cursor: pointer
      &:hover
        background: #eee;
      &.combox-option-selected
        color:#333
        background:#CCEBF5